<style lang='scss'>
	.form-dialog {
		.el-dialog__body {
			padding-top: 0;
		}
		.label {
			color: #9da3a8;
			margin-bottom: 10px;
			margin-top: 18px;
		}
		.foot-btns {
			margin-top: 16px;
			display: flex;
			align-items: center;
			justify-content: flex-end;
    	span.remark-text {
    		flex-grow: 1;
    	}
    	.el-button {
    		padding: 9px 23px;
    	}
    	.el-button+.el-button {
    		margin-left: 6px;
    	}
		}
	}
</style>
<template>
	<el-dialog :visible.sync="dialog_visible" class="form-dialog" @closed="dialogClosedHandle" width="420px" :title="title">
		<div v-for="form in form_arr">
			<p class="label">{{form.title}}</p>
			<cusInput :v_input.sync="form_data[form.key]" :type="form.type||'text'"></cusInput>
		</div>
		<div class="foot-btns">
			<span class="remark-text" v-if="remind_text"><i class="el-icon-warning"></i>{{remind_text}}</span>
			<el-button size="small" @click="dialog_visible=false">取消</el-button>
			<el-button size="small" type="primary" @click="submit" :loading="btn_loading">确定</el-button>
		</div>
	</el-dialog>
</template>
<script>
	import cusInput from 'components/cus_input.vue';
	export default {
		props: {
			prop_title: {
				default: ''
			},
			prop_form_arr: {
				default: () =>[]
			},
			prop_callback: {
				default: null
			},
			prop_remind_text: {
				default: ''
			}
		},
		data() {
			return {
				dialog_visible: false,
				title: this.prop_title,
				form_arr: this.prop_form_arr,
				callback: this.prop_callback,
				remind_text: this.prop_remind_text,
				form_data: {},
				btn_loading: false
			}
		},
		watch: {
			form_arr(val) {
				this.initFormData();
			}
		},
		methods: {
			initFormData() {
				for(let item of this.form_arr) {
					let key = item.key;
					if(this.form_data[key] == undefined) {
						this.form_data[key] = item.default_val || '';
					}
				}
			},
			close() {
				this.dialog_visible = false;
			},
			triggerLoading(loading = true) {
				this.btn_loading = loading;
			},
			showData(callback, title, form_arr, remind_text) {
				if(!this.prop_callback) this.callback = callback;
				if(!this.prop_title) this.title = title;
				if(!this.prop_form_arr.length) this.form_arr = form_arr;
				if(!this.prop_remind_text) this.remind_text = remind_text||'';
				this.dialog_visible = true;
			},
			submit() {
				if(this.callback) this.callback(this.form_data);
			},
			dialogClosedHandle() {
				this.dialog_visible = false;
				this.title = this.prop_title;
				this.form_arr = this.prop_form_arr;
				this.callback = this.prop_callback;
				this.form_data = {};
				this.btn_loading = false;
			}
		},
		created() {
			this.initFormData();
		},
		components: {
			cusInput
		}
	}
</script>